<template>
    <div class="loading-container" v-if="isLoading">
     
    <div class="loading-overlay"></div>
    <div class="loading-spinner"></div>
    </div>
    </template>
<script>
import {inject} from 'vue'
// import {ref} from 'vue'
export default {

  setup() {
    const isLoading=inject('isLoading')
    return {
        isLoading
    }
  },
//生命周期
created(){
},
//生命周期
mounted(){
},
//注册组件
components:{
},
};
</script>
    
<style lang="less" scoped>
.loading-container {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}

.loading-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
}

.loading-spinner {
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
width: 30px;
height: 30px;
animation: spin 2s linear infinite;
}

@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
